<template>
  <div class="header">
    <div class="box">
      <div class="logo">
        <img src="../assets/logo.png" alt="">
      </div>
      <div class="project-name">
        <div>项目--版本名称:</div>
        <div>卡拉水电站--1.1.2</div>
      </div>
      <div class="fps-box">
        <el-checkbox v-model="fps_data.checked" label="FPS:" class="check_box_color"></el-checkbox>
        <el-input v-model="fps_data.value"
                  v-if="fps_data.checked"
                  size="small"
                  :input-style="{background:'#12212e',color:'#06ceae',borderColor:'#12212e'}"
                  class="input"/>
      </div>
    </div>
    <div class="box">
      <div>{{ user.name }}</div>
      <div>
        <el-avatar :size="30" :src="user.avatar"></el-avatar>
      </div>
      <div>{{ user.introduction }}</div>
    </div>

  </div>
</template>

<script>
import {getUserById} from "../api";
import {onMounted, reactive} from "vue";

export default {
  name: "Header",
  setup() {
    let user = reactive({
      name: '',
      introduction: '',
      avatar: ''
    }),
    fps_data=reactive({
      checked:false,
      value:''
    })
    onMounted(async () => {
      let res = await getUserById(1);
      user.name = res.data.name;
      user.introduction = res.data.introduction;
      user.avatar = res.data.avatar;
    })
    return {
      user,
      fps_data
    }
  }
}
</script>

<style scoped lang="less">
@primary-color: #06ceae;
@backgroundColor:#12212e;
.header {
  height: 48px;
  background: @backgroundColor;
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-wrap: nowrap;

  .box {
    display: flex;
    align-items: center;

    &:first-child {

      .logo {
        margin-left: 8px;
        width: 45px;
      }

      img {
        height: 30px;
        width: 28px;
        margin: 0 16px;
      }

      .project-name {
        margin-left: 15px;
        display: flex;
        font-size: 14px;
        &:before{
          content: "";
          display: block;
          width: 6px;
          height: 100%;
          left: -18px;
          top: 0;
          background: repeating-linear-gradient(#0d161e,#0d161e 1px,transparent 0,transparent 2px);
        }
        div {
          color: white;

          &:last-child {
            margin-left: 7px;
            color: @primary-color;
          }
        }

      }
      .fps-box{
        margin-left: 100px;
        display: flex;
        align-items: center;
        .input{
          margin-left: 10px;
        }
      }
    }

    &:last-child {
      margin-right: 20px;
      color: azure;

      img {
        height: 30px;
        border-radius: 50%;
      }

      div:nth-child(2) {
        color: red;
        margin-left: 30px;
        margin-right: 30px;
      }
    }
  }
}

.check_box_color{
  --el-checkbox-text-color:white;
  --el-color-primary:@primary-color;
}
</style>
